<template>
	<div id="app">
		<PrintDesigner />
		<!-- 预览 -->
		<a-button @click="handlePrintPreview">预览</a-button>
		<PrintPreview ref="printPreviewRef" />
	</div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import PrintPreview from "./components/preview.vue";
import { hiprint } from "vue-plugin-hiprint";

export default defineComponent({
	name: "ParentComponent",
	components: {
		PrintPreview
	},
	setup() {
		const printPreviewRef = ref<InstanceType<typeof PrintPreview>>();

		// 准备打印数据
		const printData = {
			title: "销售订单",
			items: [
				{ name: "商品A", price: 100, quantity: 2 },
				{ name: "商品B", price: 200, quantity: 1 }
			],
			total: 400
		};

		// 创建打印模板
		const createTemplate = () => {
			return new hiprint.PrintTemplate({
				template: {
					panels: [
						{
							width: 210,
							height: 297,
							printElements: [
								{
									type: "text",
									options: {
										text: "销售订单",
										fontSize: 18,
										textAlign: "center",
										width: 200,
										height: 30
									}
								}
								// 更多元素...
							]
						}
					]
				}
			});
		};

		const handlePrintPreview = () => {
			const template = createTemplate();
			console.log(template, "打印模板");

			printPreviewRef.value?.show(template, printData);
		};

		return {
			printPreviewRef,
			handlePrintPreview
		};
	}
});
</script>

<style scoped lang="less">
.menus {
	padding: 10px 24px;
}
</style>
